<template>
  <view class="search">
    <u-sticky bgColor="#F8F8F8">
      <u-navbar height="88rpx" :autoBack="true" bgColor="#F8F8F8">
        <view class="searchBox" slot="center">
          <u-search focus ref="search" bgColor="#FFFFFF" height="60rpx" placeholder="请输入内容" v-model="keyword"
            :showAction="false" @clear="clearSearch" @change="search" @search="search"></u-search>
        </view>
      </u-navbar>
      <view class="search-tabother">
        <view class="search-tab-item" :class="activeIndex == index ? 'green' : ''" v-for="(item, index) in tabType"
          :key="item.type" @click="changeType(index)">
          {{ item.label }}
        </view>
      </view>
    </u-sticky>
    <view class="search-body">
      <view v-if="activeIndex == 0" class="scroll-item shop">
        <BaseShopItem :itemContent="item" v-for="item in pageData" :key="item.id"
          @click="toPage(`product/product?id=${item.id}&supplierId=${item.supplierId}`)"></BaseShopItem>
      </view>
      <view v-if="activeIndex == 1" class="scroll-item store">
        <view class="store-item" v-for="item in pageData" :key="item.id"
          @click="toPage(`factory/supplier?id=${item.id}`)">
          <image class="store-item-img" :src="item.logoUrl" mode=""></image>
          <view class="store-item-cont">
            <view class="title">
              {{ item.shopName }}
            </view>
            <view class="tips">
              {{ item.followCount }}人关注
            </view>
            <view class="address">
              <text>{{ item.city ? item.city : '' }}</text><text class="mg16" v-if="item.monthlySales">|</text><text
                v-if="item.monthlySales">月销量{{ item.monthlySales | salesNum }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="activeIndex == 2" class="scroll-item server">
        <view class="server-item" v-for="item in pageData" :key="item.id"
          @click="toPage(`service/serviceInfo?id=${item.id}`)">
          <image class="server-item-img" :src="item.bannerImgList[0]" mode=""></image>
          <view class="server-item-cont">
            <view style="height: 80rpx;">
              <view class="title">
                {{ item.productName }}
              </view>
            </view>

            <view class="price">
              <view class="price-num">
                <text>￥</text>
                <text class="f36">{{ item.price }}</text>
              </view>
              <view class="price-people">
                2000人付款
              </view>
            </view>
            <view class="number">
              累计销量9852
            </view>
          </view>
        </view>
      </view>
      <u-loadmore v-if="pageData && pageData.length > 6" :status="Loading" />
      <empty v-show="pageData && pageData.length == 0">
        <view class="empty" slot="content">
          <text class="tips">{{ keyword ? '没有找到相关信息' : '输入内容搜索' }}</text>
        </view>
      </empty>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'
import pageMixin from "@/mixins/pageMixin"
import pullDown from "@/mixins/pullDown"
import empty from "@/components/empty.vue"
import BaseShopItem from '@/components/BaseShopItem.vue'
export default {
  mixins: [pageMixin, pullDown],
  data () {
    return {
      activeIndex: 0,  // 医院全局分类搜索类型  0 商品 1 店铺 2 服务
      tabType: [
        {
          type: 3,
          label: '商品'
        },
        {
          type: 4,
          label: '店铺'
        },
        {
          type: 2,
          label: '服务'
        }
      ],
      keyword: '',

      // 
      queryParams: {
        pageEnable: 1,
        pageSize: 6,
        pageNum: 1,
        categoryType: null,
        keyword: ''
      },
      pageApi: 'searchAllHos'
    };
  },

  components: {
    empty,
    BaseShopItem
  },
  onLoad (options) {
    if (options.activeIndex) {
      this.activeIndex = options.activeIndex
    }
  },

  methods: {
    ...mapActions('common', ['searchAllHos']),
    search () {
      this.queryParams.keyword = this.keyword
      this.queryParams.categoryType = this.tabType[this.activeIndex].type
      this.resetPageAndRefresh()
    },
    clearSearch () {
      this.keyword = this.queryParams.keyword = ''
      this.pageData = []
    },
    changeType (index) {
      this.activeIndex = index
      this.queryParams.keyword = this.keyword
      this.queryParams.categoryType = this.tabType[this.activeIndex].type
      this.pageData = []
      if (this.keyword) this.resetPageAndRefresh()
    }
  },
  onReachBottom () {
    this.getNextPageData()
  },
}
</script>

<style lang="scss" scoped>
@import '@/static/scss/common.scss';

.search {
  .searchBox {
    width: 580rpx;
    margin: 0 auto;
  }

  &-tab {
    display: flex;
    background-color: #f8f8f8;
    justify-content: space-evenly;

    &-item {
      height: 88rpx;
      line-height: 88rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      color: #121212;

      &.green {
        color: #00c2b5;
      }
    }
  }

  &-tabother {
    /* #ifdef APP-PLUS */
    margin-top: calc(var(--status-bar-height) + 88rpx);
    /* #endif */
    display: flex;
    background-color: #f8f8f8;
    justify-content: space-evenly;

    &-item {
      height: 88rpx;
      line-height: 88rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      color: #121212;

      &.green {
        color: #00c2b5;
      }
    }
  }

  &-body {
    padding-bottom: 20rpx;
    min-height: calc(100vh - var(--status-bar-height) - 176rpx);
    background-color: #ffffff;

    .scroll {
      background-color: #ffffff;

      &-item {
        padding: 24rpx;
        box-sizing: border-box;

        &.shop {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }

        .shop-item {
          display: flex;
          flex-direction: column;
          width: 343rpx;
          margin-bottom: 16rpx;

          &-img {
            width: 343rpx;
            height: 343rpx;
            background: linear-gradient(180deg, #ffffff 0%, #e6e7eb 100%);
            border-radius: 20rpx;
          }

          &-cont {
            margin: 12rpx 16rpx;

            .name {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #121212;
              @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white);
            }

            .price {
              display: flex;
              margin: 19rpx 0 22rpx;
              font-size: 22rpx;
              line-height: 100%;

              &-num {
                color: #ff4b00;
                margin-right: 16rpx;

                .f36 {
                  font-size: 36rpx;
                }
              }

              &-people {
                color: #999999;
              }
            }

            .shopping {
              display: flex;
              justify-content: space-between;

              .sale {
                display: inline-block;
                height: 32rpx;
                line-height: 32rpx;
                padding: 0 12rpx;
                font-size: 22rpx;
                color: #ff8000;
                background: rgba($color: #ff8000, $alpha: 0.12);
                border-radius: 6rpx;
              }

              .buy {
                width: 48rpx;
                height: 48rpx;

                &-img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }

        &.store {}

        .store-item {
          display: flex;
          margin-bottom: 60rpx;

          &-img {
            margin-right: 24rpx;
            width: 160rpx;
            height: 160rpx;
            background: #ffffff;
            border-radius: 12rpx;
            border: 1rpx solid #ebebeb;
          }

          &-cont {
            .title {
              font-size: 28rpx;
              font-weight: 400;
              color: #121212;
              line-height: 40rpx;
              @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white);
            }

            .tips {
              display: inline-block;
              margin: 19rpx 0 21rpx;
              height: 32rpx;
              line-height: 32rpx;
              padding: 0rpx 12rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: #ff4b00;
              background: rgba($color: #ff8000, $alpha: 0.12);
              border-radius: 6rpx;
            }

            .address {
              color: #999999;
              font-size: 24rpx;
              font-weight: 400;
              color: #999999;
              line-height: 32rpx;

              .mg16 {
                margin: 0 16rpx;
              }
            }
          }
        }

        &.server {}

        .server-item {
          display: flex;
          margin-bottom: 60rpx;

          &:last-child {
            margin-bottom: 0;
          }

          &-img {
            margin-right: 24rpx;
            width: 200rpx;
            height: 200rpx;
            background: linear-gradient(180deg, #ffffff 0%, #e6e7eb 100%);
            border-radius: 20rpx;
          }

          &-cont {
            flex: 1;

            .title {
              width: 100%;
              font-size: 28rpx;
              font-weight: 400;
              color: #121212;
              line-height: 40rpx;
              @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white);
            }

            .price {
              display: flex;
              margin: 19rpx 0 22rpx;
              font-size: 22rpx;
              line-height: 100%;

              &-num {
                color: #ff4b00;
                margin-right: 16rpx;

                .f36 {
                  font-size: 36rpx;
                }
              }

              &-people {
                color: #999999;
              }
            }

            .number {
              color: #999999;
              font-size: 24rpx;
              font-weight: 400;
              color: #999999;
              line-height: 32rpx;
            }
          }
        }
      }
    }
  }
}</style>
